<template>
  <div class="login">
    <div class="login-form">
      <div class="weui-cells__group weui-cells__group_form">
        <div class="weui-cells__title">
          <img class="logo" src="../../public/images/logo组合_横_蓝@2x.png"/>
          <div class="title">预付费系统</div>
        </div>
        <div class="weui-cells weui-cells_form">
          <div class="weui-cell weui-cell_active">
            <div class="weui-cell__hd"><label class="weui-label user"></label></div>
            <div class="weui-cell__bd">
              <input class="weui-input" placeholder="用户名">
            </div>
          </div>
          <div class="weui-cell weui-cell_active">
            <div class="weui-cell__hd"><label class="weui-label password"></label></div>
            <div class="weui-cell__bd">
              <input class="weui-input" type="password" placeholder="密码">
            </div>
          </div>
        </div>
      </div>
      <div class="weui-form__opr-area">
        <button type="submit" class="weui-btn weui-btn_primary" @click="login">登录</button>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "Login",
    methods: {
      login() {
        this.$router.push({path: '/meters'})
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "../style/scss_common";

  .login {
    background: url('../../public/images/login@2x.png') no-repeat;
    background-size: cover;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;

    .login-form {
      width: j(640);
      background: #24262D;
      opacity: 0.9;
      padding: j(48) j(68);

      .weui-cells__title {
        display: flex;
        padding: 0;
        margin-bottom: j(54);

        .logo {
          @include size(244, 60)
        }

        .title {
          margin-left: j(20);
          flex: 1;
          text-align: right;
          width: j(200);
          height: j(52);
          font-size: j(40);
          font-family: MicrosoftYaHei;
          color: rgba(255, 255, 255, 1);
          line-height: j(52);
          border-left: j(1) solid #fff;
        }
      }

      .weui-cells {
        background: none;

        .weui-cell {
          border: j(1) solid #6D7278;
          border-radius: j(10);
          margin-bottom: j(35);
          padding: j(16) j(32) j(16) 0;
          height: j(64);
        }

        .weui-label {
          width: j(64);
          height: j(64);

          &.user {
            background: url('../../public/images/iconUser.png') no-repeat;
          }

          &.password {
            background: url('../../public/images/iconPwd.png');
          }

          &.user, &.password {
            background-size: cover;
            margin: j(0) j(18);
            width: j(28);
            height: j(34);
          }
        }

        .weui-input {
          line-height: j(36);
          height: j(36);
          font-size: j(32);
          font-family: ArialMT;
          color: rgba(230, 241, 255, 1);
          line-height: j(36);
        }
      }

      .weui-cells__group_form .weui-cell__hd {
        padding-right: j(10);
        border-right: j(1) solid #6D7278;
        margin-right: j(22);
      }

      .weui-form__opr-area {
        margin-bottom: j(0);

        .weui-btn_primary {
          background: #9FA6AF;
        }
      }
    }
  }
</style>
